<template>
  <a-card :bordered="false">
    <div style="display: inline-block;margin-bottom: 20px">
      <a-button style="color: #FFFFFF;background-color: #00BAD0;margin-right: 15px" @click="handleAddition">
        <IconFont style="font-weight: bold;" type="iconjiahao" />添加
      </a-button>
      <a-button style="color: #FFFFFF;background-color: #F88600;margin-right: 15px" @click="handleDelete">
        <IconFont style="font-weight: bold;" type="iconshanchu" />删除
      </a-button>
      <a-button style="color: #FFFFFF;background-color: #66C3FD;margin-right: 15px" @click="loadData(true)">
        <IconFont style="font-weight: bold;" type="iconshuaxin" />刷新
      </a-button>
      <a-button @click="recycle" style="color: #FFFFFF;background-color: #F88600">
        <IconFont style="font-weight: bold;font-size: 18px" type="iconhuishouzhanx" />回收站
      </a-button>
    </div>

    <div style="display: inline-block;float: right">
      <a-button style="color: #FFFFFF;background-color: #00BAD0;margin-right: 15px" @click="screen">
        <IconFont style="font-weight: bold;" type="iconshaixuan" />筛选
      </a-button>
      <a-select v-model="queryParam.semid" style="width: 160px" placeholder="学期">
        <a-select-option v-for="item in semesters" :key="item.id" :value="item.id">
          {{ item.xqmc }}
        </a-select-option>
      </a-select>
      <a-button style="color: #FFFFFF;background-color: #028BE2;margin-left: 15px" @click="loadData()">
        <IconFont style="font-weight: bold;" type="iconsousuo" />搜索
      </a-button>
      <a-button style="color: #FFFFFF;background-color: #F88600;margin-left: 15px" @click="handleReset">
        <IconFont style="font-weight: bold;" type="iconshanchu" />清空
      </a-button>
    </div>
    <!--      图片层-->
    <a-spin :spinning="loading">
      <a-row :gutter="[16, 16]">
        <a-col :span="6" v-for="(item, index) in dataSource" :key="item.id">
          <div class="pat-wrap" :class="item.selected ? 'selected' : ''">
            <a-checkbox
              :checked="item.selected"
              @change="
                e => {
                  handlePatternChecked(e, item, index)
                }
              "
            />
            <img class="pat-img" :src="item.imgurl" />
            <a-row class="pat-shade">
              <a-col :span="24">
                <p>{{ item.name }}</p>
              </a-col>
              <a-col :span="24">
                <div class="pat-shade-div" v-for="calssItem in item.classData" :key="calssItem">
                  <IconFont type="iconjiantou1"></IconFont>
                  <p>{{ calssItem }}</p>
                </div>
              </a-col>
              <a-col :span="24">
                <div class="pat-shade-div" style="width: 45%">
                  <p>{{ item.minlimit }}-{{ item.maxlimit }}人</p>
                </div>
                <div class="pat-shade-div" style="width: 45%">
                  <p>已选：{{ item.student || 0 }}人</p>
                </div>
              </a-col>
              <a-col :span="24">
                <a style="color: #17C295;margin-right: 10px" @click="examine(item)">查看</a>
                |
                <a style="color: #0098F8;margin-left: 10px;margin-right: 10px" @click="compile(item)">
                  编辑
                </a>
                |
                <a style="color: #FC8950;margin-left: 10px;" @click="handleDelete(item)">
                  删除
                </a>
              </a-col>
            </a-row>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-pagination
          :style="{ textAlign: 'center', marginTop: '20px' }"
          size="small"
          v-model="pagination.current"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          :show-total="total => `共${total}条 ${total}`"
          @change="loadData()"
        />
        <!-- <a-pagination v-model="pagination.current" simple :total="pagination.total" hideOnSinglePage show-less-items /> -->
      </a-row>
      <base-model
        ref="baseModel"
        :z-index="10008"
        :data="editData"
        :semesters="semesters"
        :mode="editMode"
        :visible.sync="editVisible"
        @success="refreshData"
      />
      <recycle-model
        ref="recycleModel"
        :visible.sync="recycleVisible"
        :semesters="semesters"
        @examine="examine"
        @refresh-data="refreshData"
      />
      <screen-model ref="screenModel" @filter="handleFilter"></screen-model>
    </a-spin>
  </a-card>
</template>
<script>
import { IconFont } from '@/cas/ico'
import '@assets/curr/universal.less'
import baseModel from '@views/curriculas/pattern/modules/baseModel'
import screenModel from '@views/curriculas/pattern/modules/screenModel'
import recycleModel from '@views/curriculas/pattern/modules/recycleModel'
import '@assets/less/generalStyle.less'
import apiScheduleClassChoiceXkms from '@api/schedule/classChoice-xkms'
import { EduUtils } from '@/mixins/EduUtils'

export default {
  name: 'VeJwXkmsList',
  mixins: [EduUtils],
  components: {
    IconFont,
    baseModel,
    recycleModel,
    screenModel
  },
  data() {
    return {
      loading: false,
      columns: [],
      pagination: {
        current: 1,
        pageSize: 12,
        total: 0
      },
      dataSource: [],
      queryParam: {},
      filterData: {},
      semesters: [],
      editData: undefined,
      editMode: 1, // 编辑模式： 1 新增 / 2 编辑 / 3 查看
      editVisible: false, // 编辑弹框
      recycleVisible: false // 回收站弹窗
    }
  },
  created() {
    this.loadData()
    this.getSemesters()
  },
  methods: {
    getQueryParams() {
      //获取查询条件
      const param = { ...this.queryParam, ...this.filterData }
      param.pageNo = this.pagination.current
      param.pageSize = this.pagination.pageSize
      return param
    },
    handlePatternChecked(e, record, index) {
      record.selected = e.target.checked
      this.$set(this.dataSource, index, record)
    },
    refreshData() {
      this.loadData(true)
    },
    loadData(refresh) {
      if (refresh) {
        this.pagination.current = 1
      }
      const params = this.getQueryParams() //查询条件
      this.loading = true
      apiScheduleClassChoiceXkms.getPageList(params).then(res => {
        const { success, result, code } = res
        if (success) {
          this.dataSource = result.records.map(item => {
            const { kcmc } = item
            const classData = kcmc ? kcmc.split(',') : []
            return { ...item, classData }
          })
          this.pagination.total = result.total
        } else {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    recycle() {
      this.recycleVisible = true
    },
    openBaseModel(mode, data) {
      this.editVisible = true
      this.editMode = mode
      this.editData = data
    },
    // 新增
    handleAddition() {
      this.openBaseModel(1)
    },
    // 查看详情
    examine(data) {
      this.openBaseModel(3, data)
    },
    // 编辑
    compile(data) {
      this.openBaseModel(2, data)
    },
    handleDelete(data) {
      let ids = []
      if (data.id) {
        ids = [data.id]
      } else {
        this.dataSource.forEach(item => {
          if (item.selected) {
            ids.push(item.id)
          }
        })
      }
      if (!ids.length) {
        return this.$message.warning('请至少选择一条记录！')
      }
      const _this = this
      this.$confirm({
        title: '提示',
        content: '此操作将选中记录的放入回收站, 是否继续?',
        onOk() {
          return new Promise((resolve, reject) => {
            apiScheduleClassChoiceXkms.batchDel({ ids: ids.join(',') }).then(res => {
              if (res.success) {
                _this.$message.success('删除成功！')
                _this.loadData(true)
              } else {
                _this.$message.warning(res.message)
              }
              resolve()
            })
          })
        },
        onCancel() {}
      })
    },
    handleReset() {
      this.queryParam = {}
    },
    screen() {
      this.$refs.screenModel.scre()
      this.$refs.screenModel.title = '筛选'
    },
    // 筛选回调
    handleFilter(data) {
      this.filterData = data
      this.loadData(true)
    }
  }
}
</script>
<style scoped lang="less">
.pat-wrap {
  &:hover,
  &.selected {
    .ant-checkbox-wrapper {
      display: block;
    }
  }
  .ant-checkbox-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
  }
}
</style>
